<template>
  <div id="myheader">
    <!-- 首页搜索框 (点击首页搜索跳转到此页)-->
    <!-- <van-sticky z-index="110"> -->
    <div class="bgsearch">
      <div id="search">
        <input type="text"
               class="search"
               v-model="key"
               placeholder="搜索达人/商品/直播"
               @keyup.enter="searchWord"
               onfocus="if(this.value=='搜索达人/商品/直播'){this.value=''};this.style.color='#333';" />
        <img src="@/assets/two/seach.png"
             class="searchicon"
             name="search"
             @click="searchWord" />
      </div>
    </div>
    <!-- 热搜达人/商品/直播 -->
    <div class="bgbox">
      <van-tabs v-model="active"
                prop="name"
                title-active-color="#222"
                title-inactive-color="#888">

        <!-- 达人搜索结果 -->
        <van-tab title="达人">
          <van-loading size="24px"
                       vertical
                       type="spinner"
                       v-if="loading_01">拼命加载中...</van-loading>
          <!-- <van-list v-model="loading"
                    :finished="finished"
                    finished-text="我是有底线的～"
                    @load="onLoad"
                    :immediate-check="false"> -->
            <div class="hottalent">
              <!-- <p class="num">共{{talent}}条结果</p> -->
              <div class="box"
                   v-for="(item, i) in talent"
                   :key="i + 'result_content01'"
                   @click="todatails(item.author_id)">
                <div class="logo">
                  <div class="img">
                    <van-image round
                               :src="item.logo" />
                  </div>
                </div>
                <div class="right person">
                  <p class="name">{{ item.nickname }}</p>
                  <span>粉丝&nbsp;{{  format_num(item.total_fans)}}</span>
                </div>
              </div>
              <p v-if="talent.length != 0"
                 class="nothingWl">我是有底线的～</p>
            </div>
          <!-- </van-list> -->
          <div class="nothing"
               v-if="talent.length == 0 && !loading_01">
            <img src="@/assets/two/nosearch.png">
            <p>暂无符合条件的搜索结果</p>
          </div>
        </van-tab>

        <!-- 商品搜索结果 -->
        <van-tab title="商品">
          <van-loading size="24px"
                       vertical
                       type="spinner"
                       v-if="loading_01">拼命加载中...</van-loading>
          <div class="hotgoods">
            <!-- <p class="num">共{{response.pro_count}}条结果</p> -->
            <!-- 商品 -->
            <div class="box"
                 v-for="(item, i) in sergoods"
                 :key="i + 'result_content02'"
                 @click="goods(item.proId)">
              <div class="logo">
                <div class="img">
                  <img round
                       :src="item.proLogo" />
                </div>
              </div>
              <div class="right">
                <p class="name">{{ item.proTitle }}</p>
                <span class="type">价格：￥{{ item.proPrice }}</span>
              </div>
            </div>
            <p v-if="sergoods.length != 0"
               class="nothingWl">我是有底线的～</p>
            <div class="nothing"
                 v-if="sergoods.length == 0 && !loading_01">
              <img src="@/assets/two/nosearch.png">
              <p>暂无符合条件的搜索结果</p>
            </div>
            <!-- <div class="bot1"
                 v-if="!permissions">
              <p>登录电脑端查看更多数据</p>
              &nbsp;
              <a href="javascript:">https://dy.zsjx114.com</a>
            </div> -->
          </div>
        </van-tab>

        <!-- 直播搜索结果 -->
        <van-tab title="直播">
          <van-loading size="24px"
                       vertical
                       type="spinner"
                       v-if="loading_01">拼命加载中...</van-loading>
          <div class="hotlive">
            <!-- <p class="num">共{{talent}}条结果</p> -->
            <div class="box"
                 v-for="(item, i) in  livess"
                 :key="i + 'result_content03'"
                 @click="LiveForDetails(item.authorId, item.roomId)">
              <div class="logo">
                <div class="img">
                  <img :src="item.roomLogo" />
                </div>
              </div>
              <div class="right">
                <div class="wid">
                  <p class="name">{{ item.roomTitle }}</p>
                  <span class="type">开播时间：{{ timestamp(item.beginUnx, "Y/M/D h:m:s")}}</span>
                </div>
              </div>
            </div>
            <p v-if=" livess.length != 0 "
               class="nothingWl">我是有底线的～</p>
            <div class="nothing"
                 v-if=" livess.length == 0 && !loading_01">
              <img src="@/assets/two/nosearch.png">
              <p>暂无符合条件的搜索结果</p>
            </div>
            <!-- <div class="bot1"
                 v-if="!permissions">
              <p>登录电脑端查看更多数据</p>
              &nbsp;
              <a href="javascript:">https://dy.zsjx114.com</a>
            </div> -->
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div></div>
  </div>
</template>

<script>
import search from '@/component/search_my'
export default {
  name: '',
  components: { search },
  data() {
    return {
      keyword: '',
      active: '达人',
      page: 1,
      pageSize: 20,
      Time: '',
      time7: '',
      talent: [],
      livess: [],
      sergoods: [],
      nothing: false, //无符合条件的搜索
      permissions: 1, // 权限
      history: false,
      history_data: [],
      response: null,
      loading_01: true,
      //触底
      loading: false,
      finished: false,
      refreshing: false,
    }
  },
  computed: {},
  watch: {
    active: function (newValue, oldValue) {
      this.finished = false
      // console.log(newValue + '@@@@')
      this.keyword = this.$route.query.keyword
      this.permissions = false;
      this.searchWord()
    },
  },
  created() {
    this.talent = []
    // this.get_data()
    // this.toSearch()
    // this.searchData()
    //接收搜索框的参数
    if (this.$route.query.keyword) {
      this.keyword = this.$route.query.keyword
      this.key = this.keyword
    }
  },
  mounted() {},
  methods: {
    // 搜索框
    searchWord() {
      if (this.key != '') {
        this.keyword = this.key
      }
      this.page = 1
      if (this.active == 0) {
        this.talent = []
        this.get_data()
      } else if (this.active == 1) {
        this.sergoods = []
        this.toSearch()
      } else {
        this.livess = []
        this.searchData()
      }
    },
    // 搜索达人接口
    get_data(cpage) {
      let that = this
      this.loading_01 = true
      if (cpage) {
        this.page = cpage
      }
      if (that.cancel01) {
        that.cancel01()
      }
      this.$axios
        .post(
          '/api/author/search',
          {
            keyword: that.trimStr(this.keyword),
            fans: '不限',
            category: 0,
            gender: 3,
            age: '不限',
            star: '不限',
            province: '不限',
            city: '不限',
            favorite_count: '不限',
            hint: '不限',
            verify_type: 3,
            video_count: '不限',
            pro_count: '不限', //暂时传0
            is_shop: 0,
            is_top_sale: 0,
            more_gender: 3,
            more_age: '不限',
            more_star: '不限',
            more_province: '不限',
            more_city: '不限',
            page: this.page,
            size: 100,
            order_by: 'desc',
            sort: 'totalfans',
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel) that.cancel()
              that.cancel = c
            }),
          }
        )
        .then((response) => {
          if (response.data && response.data.code == 0) {
            this.talent = response.data.data
            this.loading_01 = false
            // this.refreshing = false
            // this.finished = false
          }
          if (response.data.code == 1002) {
            // this.loading = false
            this.loading_01 = false
            this.permissions = 1
            // this.finished = false
          }
          if (response.data.code == 1003) {
            this.permissions = 0
            // this.loading = false
            this.loading_01 = false
            // this.finished = false
          }
        })
        .catch((error) => {
          console.log(error)
          this.loading_01 = false
        })
    },
    // 搜索商品接口
    toSearch(cpage) {
      let that = this
      this.loading_01 = true
      if (cpage) {
        this.page = cpage
      }
      this.$axios
        .post('/api/product/search', {
          associatedVideoRange: -1,
          categoryId: '0',
          commissionRateRange: -1,
          coupon: 0,
          isDiscover: 0,
          key: this.trimStr(this.keyword),
          pageIndex: this.page,
          pageSize: 100,
          priceRange: -1,
          sort: 1,
          source: -1,
          viewRange: -1,
          volumeRange: -1,
        })
        .then((response) => {
          if (response.data.code == 0) {
            this.sergoods = response.data.data
            this.loading = false
            this.loading_01 = false
            this.finished = false
          }
          if (response.data.code == 1002) {
            this.loading = false
           this.loading_01 = false
            this.permissions = 1
          }
          if (response.data.code == 1003) {
            this.permissions = 0
            this.loading = false
            this.loading_01 = false
            this.finished = false
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 搜索直播接口
    searchData(cpage) {
      let that = this
      this.loading_01 = true
      if (cpage) {
        this.page = cpage
      }
      that.$axios
        .post(
          '/api/live/search',
          {
            age: '不限', //年龄区间
            category: 0,
            city: '不限',
            enddate: this.Time, //结束时间----今天
            gender: 2,
            isshop: 0,
            keyword: this.trimStr(this.keyword),
            laimai: 2,
            livepro: '不限',
            livesalesvolume: '不限',
            livevolume: '不限',
            more_age: '不限',
            more_city: '不限',
            more_gender: 2,
            more_province: '不限',
            order_by: 'desc',
            page: this.page, //页码
            peoplepeak: '不限',
            procategory: '0',
            province: '不限',
            size: 100, //	每页的条数
            sort: 0,
            startdate: this.time7, //开播时间---一周前
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel()
              }
              that.cancel = c
            }),
          }
        )
        .then((response) => {
          that.loading = false
          if (response.data.code == 0) {
            that.livess = response.data.data
            this.loading_01 = false
            this.loading = false
            this.finished = false
          } else if (response.data.code == 1003) {
            this.permissions = 0
            this.loading = false
            this.loading_01 = false
            this.finished = false
          } else if (response.data.code == 1002) {
            this.loading = false
           this.loading_01 = false
            this.permissions = 1
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    //跳转达人详情
    todatails(id) {
      this.$router.push({ path: '/talentDetailsMain', query: { id } })
    },
    //跳转商品详情
    goods(id) {
      this.$router.push({ path: '/goodsDetailsMain', query: { id: id } })
    },
    //跳转直播
    LiveForDetails(author_id, room_id) {
      this.$router.push({
        path: '/LiveForDetailsMain',
        query: { author_id, room_id },
      })
    },
    //触底
    onLoad() {
      if (this.page * this.pageSize > this.talent.length) {
        // this.loading = false
        // this.finished = true
      } else if (this.talent.length > 0) {
        // this.loading = true
        this.page = this.page + 1
        this.get_data()
      }
    },
    //上拉刷新
    onRefresh() {
      this.loading = false
      this.talent = []
    },
    //当前日默认时间
    getday() {
      var nowdate = new Date()
      var y = nowdate.getFullYear()
      var m = nowdate.getMonth() + 1
      if (m < 10) {
        m = '0' + m
      }
      var d = nowdate.getDate()
      if (d < 10) {
        d = '0' + d
      }
      var time = y + '-' + m + '-' + d
      var time7 = y + '-' + m + '-' + (d - 7)
      this.Time = time //现在
      this.time7 = time7 //一周前
    },
  },
}
</script>
<style scoped lang='less'>
#myheader {
  background: #f1f1f1;
  min-height: 100vh;
  overflow: hidden;
  //  显示搜索数量
  .num {
    width: 100%;
    font-size: 0.373333rem;
    line-height: 0.373333rem;
    padding: 0.37333rem 0 0.266rem 0.1rem;
  }
  .bgbox {
    width: 100%;
  }
  .box {
    width: 9.2rem;
    margin: 0 auto;
    background: #fff;
    border-radius: 0.133333rem;
  }
  // 达人
  .hottalent {
    .box {
      display: flex;
      margin-top: 0.186667rem;
      .logo {
        width: 1.813333rem;
        padding-bottom: 0.266667rem;
      }
      .img {
        width: 1.173333rem;
        height: 1.17333rem;
        margin-left: 0.24rem;
        margin-top: 0.266667rem;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        box-sizing: border-box;
        > .van-image--round {
        }
      }
      .right {
        > p {
          width: 5rem;
          font-size: 0.4rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 0.373333rem;
          letter-spacing: 1px;
          color: #222222;
          padding: 0.426667rem 0 0.346667rem 0;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        > span {
          display: block;
          font-size: 0.2933rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 0.2933rem;
          letter-spacing: 0px;
          color: #888888;
          padding-bottom: 0.1333rem;
        }
      }
    }
  }
  // 商品
  .hotgoods {
    .box {
      display: flex;
      margin-top: 0.186667rem;
      .logo {
        width: 1.81333rem;
        padding: 0.266667rem 0;
      }
      .img {
        width: 1.173333rem;
        height: 1.17333rem;
        margin-left: 0.1866rem;
        img {
          width: 1.173333rem;
          height: 1.17333rem;
          border: 1px solid #e5e5e5;
          border-radius: 0.213rem;
        }
      }
      .right {
        > p {
          width: 5rem;
          font-size: 0.4rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 0.4rem;
          letter-spacing: 1px;
          color: #222222;
          padding: 0.4266rem 0 0.3466rem 0;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        > span {
          display: block;
          // font-size: 0.32rem;
          font-size: 0.2933rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 0.32rem;
          letter-spacing: 0px;
          color: #888888;
          padding-bottom: 0.1333rem;
        }
      }
    }
  }
  // 直播
  .hotlive {
    .box {
      display: flex;
      margin-top: 0.186667rem;
      .logo {
        width: 1.81333rem;
        padding: 0.266667rem 0;
      }
      .img {
        width: 1.173333rem;
        height: 1.17333rem;
        margin-left: 0.1866rem;
        img {
          width: 1.173333rem;
          height: 1.17333rem;
          border: 1px solid #e5e5e5;
          border-radius: 0.213rem;
        }
      }
      .right {
        p {
          width: 5rem;
          font-size: 0.4rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 0.4rem;
          letter-spacing: 1px;
          color: #222222;
          padding: 0.4266rem 0 0.3466rem 0;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        span {
          display: block;
          font-size: 0.2933rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 0.32rem;
          letter-spacing: 0px;
          color: #888888;
          padding-bottom: 0.1333rem;
        }
      }
    }
  }
  // 暂无数据
  .nothing {
    width: 100%;
    margin-top: 3.8rem;
    img {
      display: flex;
      display: flex;
      justify-content: center;
      align-items: center;
      display: block;
      width: 5.1667rem;
      height: 4.1667rem;
      margin: 0 auto;
    }

    p {
      text-align: center;
      font-size: 0.373333rem;
      line-height: 0.4rem;

      color: #888888;
    }
  }
  // 搜索框
  .bgsearch {
    width: 100%;
    background: #fff;
    padding: 10px 0;
  }
  #search {
    position: relative;
    width: 9.24rem;
    background: #fff;
    margin: 0 auto;
    text-align: center;
    height: 0.906667rem;
    .search {
      position: absolute;
      top: 0;
      left: 0;
      text-indent: 0.4rem;
      width: 9.2rem;
      height: 100%;
      line-height: 0.906667rem;
      background-color: #f1f1f1;
      border: none;
      border-radius: 0.453333rem;
      font-size: 0.346667rem;
      color: #222;
      box-sizing: border-box;
      padding-right: 1.2rem;
    }
    input:-ms-input-placeholder {
      color: #b5b5b5;
    }
    .searchicon {
      width: 0.4rem;
      height: 0.4rem;
      position: absolute;
      top: 0.26rem;
      right: 0.733333rem;
      color: #b5b5b5;
      z-index: 10000;
    }
    .van-ellipsis {
      overflow: hidden;
      text-overflow: clip !important;
    }
  }
  // 登录pc查看更多
  .bot1 {
    display: flex;
    width: 9.2rem;
    height: 0.88rem;
    line-height: 0.88rem;
    background-color: #f4f9ff;
    border-radius: 0.44rem;
    border: solid 0.02rem #1779ff;
    margin: 0 auto;
    margin-bottom: 1.506667rem;

    p {
      margin-left: 0.6rem;
      font-size: 0.346667rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 1px;
      color: #222222;
    }
    a {
      font-size: 0.346667rem;
      color: #1779ff;
      text-decoration: none;
    }
  }
}
</style>
